<template>
  <section class="contentCon">
      <div><el-button icon="el-icon-back" class="back" @click="clickback">返回设备详情</el-button></div> 
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="line-height: 36px;">{{this.$route.query.deviceId}} 原始数据</span></div></el-col>
      </el-row>
      <el-tabs type="border-card">
        <el-tab-pane label="原始数据">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="jobStatusSearch">
          </el-date-picker>
          <el-row>
            <el-col :span="24">
              <!--表格-->
              <el-table
                :data="tableStatus.slice((currentPageStatus - 1) * 20, currentPageStatus * 20)"
                border
                style="width: 100%">
                <el-table-column
                  prop="serviceId"
                  label="服务id"
                  width="90">
                </el-table-column>
                <el-table-column
                  prop="timestamp"
                  label="上报时间"
                  width="180"
                  :formatter="formatTimeStatus">
                </el-table-column>
                <el-table-column
                  prop="eventContent"
                  label="上报内容">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChangeStatus"
                  :current-page="currentPageStatus"
                  :page-size="20"
                  layout="prev, pager, next, jumper"
                  :total="tableStatus.length">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
  </section>
</template>
<script type="text/ecmascript-6">
import { profilegcService } from '@/services';
import utils from '@/utils.js';

export default {
  data () {
    var date = new Date();
    var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
    return {
      tableStatus: [],
      form: {
        deviceId: '',
        deviceName: '',
        imei: '',
        event: '',
        reportTime: '',
      },
      currentPageStatus: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [lastDate, date],
    };
  },
  created () {
    this.queryDeviceStatusData();
  },
  methods: {
    jobStatusSearch() {
      this.currentPageStatus = 1;
      this.queryDeviceStatusData();
    },
    clickback () {
      this.$router.go(-1);
    },
    handleCurrentChangeStatus(val) {
      this.currentPageStatus = val;
      console.log(`当前页: ${val}`);
    },
    async queryDeviceStatusData () {
        this.tableStatus = await profilegcService.queryDeviceJsonData(this.$route.query.deviceId, this.value1[0].getTime(), this.value1[1].getTime());
    },
    formatTimeStatus(row, column) {
      return utils.timestampToTime(row.timestamp);
    },
  },
};
</script>
<style lang="scss">
.el-range-editor {
  margin-bottom: 20px;
}
</style>